<template>
  <div class="booking">
    <div class="bg">
      <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" :clearable="false" @input="onSearch">
      </van-search>
    </div>

    <div class="box">
      <van-cell-group inset>
        <van-cell>
          <template #title>
            <div style="display: flex; justify-content: space-between;">
              <div style="color: #470607FF;">综合排序
                <van-icon name="arrow-down" />
              </div>
              <!-- <div style="color: #470607FF;"><img src="../../assets/img/daoxu.png" alt="">全部筛选</div> -->
            </div>
          </template>
        </van-cell>

        <router-link to="/Merchant">
          <van-card :title="item.shop_name" :thumb="`${resourceURL}${item.imagesurl}`" v-for="(item, index) in ShopLists" :key="index">
            <template #desc>
              <div class="title">{{ item.province }}{{ item.city }}{{ item.area }}</div>
              <div class="title">
                {{ item.address }}</div>
            </template>
            <!-- <template #price>
            <div>月售4000+</div>
          </template> -->
          </van-card>
        </router-link>
        <van-empty image="search" description="描述文字" v-if="ShopLists == ''" />
      </van-cell-group>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data () {
    return {
      value: '',
      ShopLists: []
    }
  },
  created () {
    this.ShopList()
  },
  methods: {
    // 搜索
    onSearch () {
      this.ShopList()
    },
    // 清除
    onClear () {
      this.ShopList()
    },
    // 预约专区列表
    ShopList () {
      this.$axios.get(this.$api.ShopList, {
        params: {
          page: 1,
          shop_name: this.value
        }
      }).then((res) => {
        this.ShopLists = res.data.data.data

      })
    },
  }
};
</script>
<style lang='less' scoped>
.van-multi-ellipsis--l2 {
  -webkit-line-clamp: 1;
}

.van-card__title {
  font-size: 16px;
  font-weight: bold;
  color: #303030ff;
}

.van-cell::after {
  border-bottom: none;
}

.van-card {
  position: relative;
  box-sizing: border-box;
  padding: 2.13333vw 4.26667vw;
  color: #323233;
  font-size: 3.2vw;
  background-color: #ffffff;
  border-radius: 10px;
  width: 311px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.06);
  margin: 10px auto;
}

.booking {
  min-height: 100vh;

  .bg {
    width: 100%;
    height: 300px;
    background: linear-gradient(180deg, #b60102 0%, #f7f4f8 100%);
    padding: 10px 0;
    box-sizing: border-box;

    .van-search {
      background: transparent;
    }
  }

  .box {
    margin-top: -230px;

    .title {
      font-family: Source Han Sans CN;
      font-size: 12px;
      color: #909090ff;
      margin: 6px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>